<!-- FileDescription:打标签、移除标签公共组件 -->
<template>
	<el-dialog :title="type === 'add' ? '打标签' : '移除标签'" @open="open" :close-on-click-modal="false" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
		<el-form :key="type" label-width="150px" ref="label">
			<div class="scroll" style="height: 400px;">
				<template v-if="isMember">
					<el-form-item v-for="item in list" :label="item.name">
						<el-button
							v-for="val in item.group"
							size="small"
							:disabled="(type === 'add' && has_ids.some(res => res === val.code)) || (type === 'del' && has_ids.every(res => res !== val.code))"
							@click="handleClick(val.code)"
							:class="{ 'btn-gray': true, 'btn-blue': tag_ids.some(res => res === val.code) }"
						>
							{{ val.name }}
						</el-button>
					</el-form-item>
				</template>
				<template v-else>
					<el-form-item v-for="item in list" :label="item.name">
						<el-button
							v-for="val in item.group"
							size="small"
							:disabled="(type === 'add' && has_ids.some(res => res === val.id)) || (type === 'del' && has_ids.every(res => res !== val.id))"
							@click="handleClick(val.id)"
							:class="{ 'btn-gray': true, 'btn-blue': tag_ids.some(res => res === val.id) }"
						>
							{{ val.name }}
						</el-button>
					</el-form-item>
				</template>
			</div>
		</el-form>
		<span slot="footer">
			<el-button size="small" class="btn-white" @click="handleClose()">取 消</el-button>
			<el-button size="small" class="btn-blue" @click="onSubmit()">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
import {
	showCustomerTag,
	reqGetCustomTree,
	customerTag,
	reqEnterCustomerTagging,
	reqShowStaffTag,
	reqGetStaffTagTree,
	reqStaffToggle,
	reqShowCustomerGroupTag,
	reqCustomerGroupTagging
} from '@/api/index';
export default {
	props: {
		// 是否企微客户
		isWechat: {
			type: Boolean,
			default: true
		},
		// 是否企业成员
		isMember: {
			type: Boolean,
			default: false
		},
		// 是否客户群
		isGroup: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			type: '',
			dialogVisible: false,
			form: {},
			list: [],
			tag_ids: [],
			has_ids: []
		};
	},
	methods: {
		open() {
			if (this.isMember) {
				this.getMemberTag();
				this.showMemberTag();
			} else {
				this.getCustomerTag();
				if (this.isGroup) {
					this.showCustomerGroupTag();
				} else {
					this.showCustomerTag();
				}
			}
		},
		// 获取客户(企微、非企微)、客户群标签树结构
		getCustomerTag() {
			reqGetCustomTree().then(res => {
				this.list = res.data;
			});
		},
		// 回显客户(企微、非企微)已有标签
		showCustomerTag() {
			if (!this.isWechat) {
				showCustomerTag({ ...this.form, not_qw: 1 }).then(res => {
					this.has_ids = res.data;
				});
			} else {
				showCustomerTag({ ...this.form }).then(res => {
					this.has_ids = res.data;
				});
			}
		},
		// 回显客户群已有标签
		showCustomerGroupTag() {
			reqShowCustomerGroupTag({ ...this.form }).then(res => {
				if (res.data instanceof Array) {
					this.has_ids = res.data;
				} else {
					for (let key in res.data) {
						this.has_ids.push(res.data[key]);
					}
				}
			});
		},
		// 获取企业成员标签树结构
		getMemberTag() {
			reqGetStaffTagTree().then(res => {
				this.list = res.data;
			});
		},
		// 回显企业成员已有标签
		showMemberTag() {
			reqShowStaffTag({ id: this.form.id, type: this.form.type }).then(res => {
				this.has_ids = res.data;
			});
		},
		// 选择标签
		handleClick(id) {
			if (this.tag_ids.includes(id)) {
				this.tag_ids.splice(this.tag_ids.indexOf(id), 1);
			} else {
				if (this.tag_ids.length >= 20) {
					this.$message.error('客户标签最多选择20个');
				} else {
					this.tag_ids.push(id);
				}
			}
		},
		// 关闭弹窗
		handleClose() {
			this.dialogVisible = false;
			setTimeout(() => {
				Object.assign(this.$data, this.$options.data());
			}, 300);
		},
		// 提交
		onSubmit() {
			if (this.tag_ids && this.tag_ids.length) {
				if (this.isMember) {
					reqStaffToggle({ staff_user_id: this.form.staff_user_id, tag_ids: this.tag_ids, type: this.form.type }).then(res => {
						this.$emit('update:list');
						this.handleClose();
						this.$message.success(res.msg);
					});
				} else if (this.isGroup) {
					reqCustomerGroupTagging({ id: this.form.id, tag_ids: this.tag_ids, type: this.form.type }).then(res => {
						this.$message.success(res.msg);
						this.handleClose();
						this.$emit('update:list');
					});
				} else if (this.isWechat) {
					customerTag({ ...this.form, tag_ids: this.tag_ids }).then(res => {
						this.$emit('update:list');
						this.handleClose();
						this.$message.success(res.msg);
					});
				} else {
					reqEnterCustomerTagging({ ...this.form, tag_ids: this.tag_ids }).then(res => {
						this.$emit('update:list');
						this.handleClose();
						this.$message.success(res.msg);
					});
				}
			} else {
				this.$message.warning('请选择标签！');
			}
		}
	}
};
</script>

<style lang="less" scoped>
.el-dialog {
	.el-form {
		.el-button {
			margin: 0 10px 10px 0;
			&.is-disabled {
				color: #c0c4cc !important;
				background-color: #fff !important;
			}
		}
	}
}
</style>
